<template>
  <div>
    <div class="rightCol">
      <div class="rl1">
        <el-image class="rl2" :src="imag1"> </el-image>
      </div>
    </div>
    <div
       class="rl3"
    >
      <div class="rl4">
        <div class="rl5">
          <span class="rl6">精选好片</span>
          <span class="rl7"
            >TOP7</span
          >
        </div>
        <div class="rl8">
          <el-card class="box-card">
            <div v-for="(o, index) in len" :key="o" class="text item">
              <div class="rl9">
                <div class="rl10"></div>
                <div class="rl11"
                >
                  <span class="rl12">
                    {{ index + 1 }}
                  </span>
                </div>
                <div
                class="rl13"
                >
                  <span class="rl14">{{ name[index] }}</span>
                  <span class="rl15">{{ star[index] }}分</span>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
const imag1 = require('@/assets/tj2.jpg')
const movieAll = ref()
const name = ref([])
const star = ref([])
const len = ref(0)

onMounted(() => {
  axios.get('/api/movie/getTop7Movie').then((res) => {
    console.log(res.data)
    if (res.data !== null) {
      movieAll.value = res.data

      console.log(movieAll.value)
      len.value = movieAll.value.length > 7 ? 7 : movieAll.value.length

      for (let i = 0; i < len.value; i = i + 1) {
        name.value.push(movieAll.value[i].mname)
        star.value.push(movieAll.value[i].rate)
      }
    } else {
      ElMessage({
        showClose: true,
        message: '电影列表获取失败',
        type: 'error'
      })
    }
  })
})
</script>
<style lang="scss" scoped>
  .box-card{
    background-color: white; width: 100%
  }
.rightCol {
  display: flex;
  float: right;
  width: 30%;
  background-color: white;
  height: 100%;
}
.rl1{
  margin-left: -240px; margin-top: 20px
}
.rl2{
  width: 100%; height: 305px; margin-top: -5%
}
.rl3{
        display: flex;
        float: right;
        width: 100%;
        background-color: white;
        height: 100%;
        margin-top: 0px;
}
.rl4{
  background-color: burlywood; height: 100%; width: 90%
}
.rl5{
  background-color: white; height: 45px; width: 100%
}
.rl6{
  font-size: x-large; display: flex; float: left
}
.rl7{
              font-size: large;
              display: flex;
              float: left;
              color: orange;
              margin-top: 10px;
              margin-left: 20px;
}
.rl8{
  background-color: white; height: 100%; width: 405px
}
.rl9{
  width: 100%; height: 50px; background-color: white
}
.rl10{
  width: 25px; height: 12px; background-color: white
}
.rl11{
  width: 25px; height: 25px; background-color: #42b983; text-align: center
}
.rl12{
  color: white
}
.rl13{
                    margin-top: -25px;
                    margin-left: 35px;
                    background-color: white;
                    text-align: left;
                    width: 300px;
}
.rl14{
  margin-left: 5px
}
.rl15{
  color: orange; margin-left: 10px
}
</style>
